<template>
    <div class="fourModule">
        <div id="fourModule" style="width: 100%; height: 100%"></div>
    </div>
</template>
<script>
import { removeStore } from '@/libs/storage';
import { getCountGzyjyv, getCountJyhy } from '@/api/chart/chart';

export default {
    data() {
        return {
            chart: '',
            xData: ['计算机科学', '会计教育', '软件工程', '旅游管理', '工程管理'],
            yData: [18203, 23489, 29034, 104970, 131744]
        };
    },
    methods: {
        init() {
            this.chart = echarts.init(document.getElementById('fourModule'));
            let option = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    show: false,
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        type: 'category',
                        data: this.xData,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '2011',
                        type: 'bar',
                        data: this.yData,
                        label: {
                            show: true,
                            position: [5, 7],
                            color: '#fff'
                        },
                        showBackground: true, //开启背景
                        backgroundStyle: {
                            //设置背景样式
                            color: 'rgba(242, 242, 242, 1)',
                            barBorderRadius: 10
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: 5,
                                color: function (params) {
                                    var colorList = ['rgb(54, 78, 216)', 'rgb(255, 138, 0)', 'rgb(70, 220, 134)', 'rgb(255, 197, 41)', 'rgb(72, 174, 255)'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        }
                    }
                ]
            };
            this.chart.setOption(option);
        },
        async getXData() {
            const res = await getCountGzyjyv();
            if (res.success) {
                this.xData = res.result.map(e => e.xData);
                this.yData = res.result.map(e => e.yData);
            }
        }
    },
    async mounted() {
        await this.getXData();
        this.init();
    }
};
</script>

<style scoped lang="less">
.fourModule {
    width: 100%;
    height: 100%;
}
</style>
